// var data = JSON.stringify(JSON.parse(jsondata), null, 4);
// console.log(data);//这是在输出框的json数据确实被格式话了
// $(".showMessage").html(data);//但是在页面上展示时却未被格式化  

// function getJson() {
//     var myJson = '{}';
// }

// json数据的处理方法
// json.parse() & json.stringify()

// JSON.parse() 方法用于将一个 JSON 字符串转换为对象。
// JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。


//1.  用JSON.stringigy()方法把js对象这个数据转换为json字符串，再显示到浏览器上
var data = {
    "users": [
        {
            "id": 301940,
            "slug": "ef4f2422125f",
            "nickname": "卢璐说",
            "avatar_source": "https://upload.jianshu.io/users/upload_avatars/301940/189d69dd-af7c-4290-9e2c-89e98acf3603.jpg",
            "total_likes_count": 34587,
            "total_wordage": 2161476,
            "is_following_user": false,

        },
        {
            "id": 3136195,
            "slug": "6810a6332de9",
            "nickname": "梅拾璎",
            "avatar_source": "https://upload.jianshu.io/users/upload_avatars/3136195/484e32c3504a.jpg",
            "total_likes_count": 31462,
            "total_wordage": 267152,
            "is_following_user": false,

        },
        {
            "id": 52841,
            "slug": "8f5b45499715",
            "nickname": "闫泽华",
            "avatar_source": "https://upload.jianshu.io/users/upload_avatars/52841/251f5481-67b6-4bf0-86f4-faac9768beb3.jpeg",
            "total_likes_count": 4840,
            "total_wordage": 260522,
            "is_following_user": false,

        },
        {
            "id": 7290998,
            "slug": "4062aaeba322",
            "nickname": "念远怀人",
            "avatar_source": "https://upload.jianshu.io/users/upload_avatars/7290998/f64f5ef0-def0-4b26-beb3-b9d88f060ba0.jpg",
            "total_likes_count": 14683,
            "total_wordage": 704018,
            "is_following_user": false,

        },
        {
          "id": 301940,
          "slug": "ef4f2422125f",
          "nickname": "卢璐说",
          "avatar_source": "https://upload.jianshu.io/users/upload_avatars/301940/189d69dd-af7c-4290-9e2c-89e98acf3603.jpg",
          "total_likes_count": 34587,
          "total_wordage": 2161476,
          "is_following_user": false,
          
      },
      {
          "id": 3136195,
          "slug": "6810a6332de9",
          "nickname": "梅拾璎",
          "avatar_source": "https://upload.jianshu.io/users/upload_avatars/3136195/484e32c3504a.jpg",
          "total_likes_count": 31462,
          "total_wordage": 267152,
          "is_following_user": false,
          
      },
      {
          "id": 52841,
          "slug": "8f5b45499715",
          "nickname": "闫泽华",
          "avatar_source": "https://upload.jianshu.io/users/upload_avatars/52841/251f5481-67b6-4bf0-86f4-faac9768beb3.jpeg",
          "total_likes_count": 4840,
          "total_wordage": 260522,
          "is_following_user": false,
          
      },
      {
          "id": 7290998,
          "slug": "4062aaeba322",
          "nickname": "念远怀人",
          "avatar_source": "https://upload.jianshu.io/users/upload_avatars/7290998/f64f5ef0-def0-4b26-beb3-b9d88f060ba0.jpg",
          "total_likes_count": 14683,
          "total_wordage": 704018,
          "is_following_user": false,
          
      },
      {
        "id": 301940,
        "slug": "ef4f2422125f",
        "nickname": "卢璐说",
        "avatar_source": "https://upload.jianshu.io/users/upload_avatars/301940/189d69dd-af7c-4290-9e2c-89e98acf3603.jpg",
        "total_likes_count": 34587,
        "total_wordage": 2161476,
        "is_following_user": false,
        
    },
    {
        "id": 3136195,
        "slug": "6810a6332de9",
        "nickname": "梅拾璎",
        "avatar_source": "https://upload.jianshu.io/users/upload_avatars/3136195/484e32c3504a.jpg",
        "total_likes_count": 31462,
        "total_wordage": 267152,
        "is_following_user": false,
        
    },
    {
        "id": 52841,
        "slug": "8f5b45499715",
        "nickname": "闫泽华",
        "avatar_source": "https://upload.jianshu.io/users/upload_avatars/52841/251f5481-67b6-4bf0-86f4-faac9768beb3.jpeg",
        "total_likes_count": 4840,
        "total_wordage": 260522,
        "is_following_user": false,
        
    },
    {
        "id": 7290998,
        "slug": "4062aaeba322",
        "nickname": "念远怀人",
        "avatar_source": "https://upload.jianshu.io/users/upload_avatars/7290998/f64f5ef0-def0-4b26-beb3-b9d88f060ba0.jpg",
        "total_likes_count": 14683,
        "total_wordage": 704018,
        "is_following_user": false,
        
    }
    ],
    "total_count": 49019
}

//循环
// for(var i = 0; i < data.users.length; i++){
//   var ob = data.users[i];
//   console.log(ob.avatar_source);
//   console.log(ob.nickname);
// }

// document.write(data.users.length);
// document.write(data.users[0].guanzu);

// var y = data.users[0].guanzu;
// var x = document.getElementsByClassName('focus');
// document.write(x);
// document.write(y);
// document.write(y[0].innerHTML);
// document.getElementsByClassName('focus')[0].innerHTML = y;
// x.innerHTML = y;

//图片  怎莫把图片显示出来？
// document.write(data.users[0].avatar_source);
// document.write(data.users[1].avatar_source);
// document.write(data.users[2].avatar_source);
// document.write(data.users[3].avatar_source);
// document.write('<img src = ' + '\"' + data.users[0].avatar_source + '\"' + '>');
// document.write("<img src= " + '\"' + data.users[1].avatar_source + '\"' + ">");
// document.write("<img src= " + '\"' + data.users[2].avatar_source + '\"' + ">");
// document.write("<img src= " + '\"' + data.users[3].avatar_source + '\"' + ">");

//名字
// document.write(data.users[0].nickname);
// document.write(data.users[1].nickname);
// document.write(data.users[2].nickname);
// document.write(data.users[3].nickname);
//+关注
// var x = data.users[0].guanzu;
// document.write(x);

//写了多少字
// document.write('写了' + data.users[0].total_wordage + 'k字 · ' + data.users[0].total_likes_count + 'k喜欢');
// "total_likes_count": 31462,  31.4k
// "total_wordage": 267152,    267.1k
// document.write(toLocaleString(data.users[0].total_wordage))
// document.write(data.users[0].total_wordage.toLocaleString);
// "total_likes_count": 14683,  14.6k
// "total_wordage": 704018, 704k
//千位分隔符
// 实现思路:将数组转换为字符数组,再循环整个数组,每三位添加一个逗号,然后再合成字符串;
// toString(), split(), reverse()

//定义一个给一串数字加入小数点并保留一位
function numFormat(num) {
    num = num.toString().split(".");
    var arr = num[0].split("").reverse();

    var res = [];
    for (var i = 0, len = arr.length; i < len; i++) {
        if (i % 3 === 0 && i !== 0 && i !== 6) {
            res.push('.');
        }
        res.push(arr[i]);
    }
    res.reverse();
    if (num[1]) {
        res = res.join("").concat("." + num[1]);
    } else {
        res = res.join("");
    }
    return res;
}
// document.write(Math.round(numFormat(data.users[0].total_wordage) * 10) / 10);

//最后来拼字符串
// document.write('<img src = ' + '\"' + data.users[0].avatar_source + '\"' + '>');

// document.write('<div><div><div>' + '<img src = ' + '\"' + data.users[0].avatar_source + '\"' + '>' + '</div><div><div><div>' + data.users[0].nickname + '</div><div>' + data.users[0].guanzu + '</div><div>' + '写了' + Math.round(numFormat(data.users[0].total_wordage) * 10) / 10 + 'k字 · ' + Math.round(numFormat(data.users[0].total_likes_count) * 10) / 10 + 'k喜欢' + '</div></div></div>');

// for(var i = 0; i < x.length; i++){
//     // document.write(x[i]);
//     x[i].innerHTML = data.users[i].guanzu;
// }


// x[0].innerHTML = data.users[0].guanzu;
// var data_stringify = JSON.stringify(data, null, 4); //JSON.stringify() 将json对象转换为json字符串 
// document.write("<pre>" + data_stringify + "</pre>");

// var str = { "name": "菜鸟教程", "site": "http://www.runoob.com" }
// str_pretty1 = JSON.stringify(str)
// document.write("只有一个参数情况：");
// document.write("<br>");
// document.write("<pre>" + str_pretty1 + "</pre>");
// document.write("<br>");
// str_pretty2 = JSON.stringify(str, null, 4) //使用四个空格缩进
// document.write("使用参数情况：");
// document.write("<br>");
// document.write("<pre>" + str_pretty2 + "</pre>"); // pre 用于格式化输出

// for(var i = 0; i < data.users.length; i++){
//     document.write(data.users[i]);
// }

// js 对象是一种特殊的数据类型：对象有属性和方法
// var message = "hello World!";
// var x = message.length;
// document.write(x);

//创建一个对象 { }， & 创建函数
// var o = new Object();
// o.firstname = "jj";
// o.lastname = "Doe";
// o.age = 12;
// document.write(o.firstname + 'is' + o.age + '岁了');

// var person = {
//     firstname:"jj",
//     lastname:"ff",
//     age:30
// };
// document.write(person.firstname + 'is ' + person.lastname );



//flex布局导入数据
// document.getElementsByClassName("name").innerHTML = data.users[0].nickname;
// document.write(data.users[0].nickname);

//为什么写到这里就不行了？？？
// document.getElementsByClassName("name").innerHTML = data.users[0].nickname;
// document.getElementById("name").innerHTML = data.users[0].nickname;


//最后来拼字符串
// document.write('<img src = ' + '\"' + data.users[0].avatar_source + '\"' + '>');
// $(document).ready(function () {
//     // document.write('<div><div><div>' + '<img src = ' + '\"' + data.users[0].avatar_source + '\"' + '>' + '</div><div><div><div>' + data.users[0].nickname + '</div><div>' + data.users[0].guanzu + '</div><div>' + '写了' + Math.round(numFormat(data.users[0].total_wordage) * 10) / 10 + 'k字 · ' + Math.round(numFormat(data.users[0].total_likes_count) * 10) / 10 + 'k喜欢' + '</div></div></div>');

//     // $("img").append('src = ' + '\"' + data.users[0].avatar_source + '\"');
//     $('.flex-contain').html('<div class="anthor"><div class="img"><img src='+ '\"' + data.users[0].avatar_source + '\"' + '>' + '</div><div class="info"><div class="info_1"><div id="name">' + data.users[0].nickname + '</div><div class="focus">' + data.users[0].guanzu + '</div></div><div class="context">' + '写了' + Math.round(numFormat(data.users[0].total_wordage) * 10) / 10 + 'k字 · ' + Math.round(numFormat(data.users[0].total_likes_count) * 10) / 10 + 'k喜欢' + '</div></div></div></div>'
//     + '<div class="anthor"><div class="img"><img src='+ '\"' + data.users[1].avatar_source + '\"' + '>' + '</div><div class="info"><div class="info_1"><div id="name">' + data.users[1].nickname + '</div><div class="focus">' + data.users[1].guanzu + '</div></div><div class="context">' + '写了' + Math.round(numFormat(data.users[1].total_wordage) * 10) / 10 + 'k字 · ' + Math.round(numFormat(data.users[0].total_likes_count) * 10) / 10 + 'k喜欢' + '</div></div></div></div>'
//     + '<div class="anthor"><div class="img"><img src='+ '\"' + data.users[2].avatar_source + '\"' + '>' + '</div><div class="info"><div class="info_1"><div id="name">' + data.users[2].nickname + '</div><div class="focus">' + data.users[2].guanzu + '</div></div><div class="context">' + '写了' + Math.round(numFormat(data.users[2].total_wordage) * 10) / 10 + 'k字 · ' + Math.round(numFormat(data.users[0].total_likes_count) * 10) / 10 + 'k喜欢' + '</div></div></div></div>'  
//     + '<div class="anthor"><div class="img"><img src='+ '\"' + data.users[3].avatar_source + '\"' + '>' + '</div><div class="info"><div class="info_1"><div id="name">' + data.users[3].nickname + '</div><div class="focus">' + data.users[3].guanzu + '</div></div><div class="context">' + '写了' + Math.round(numFormat(data.users[3].total_wordage) * 10) / 10 + 'k字 · ' + Math.round(numFormat(data.users[0].total_likes_count) * 10) / 10 + 'k喜欢' + '</div></div></div></div>'
//     );
// });


/*
*
*/
function parseHtml(users){
  var html = ''
  var newUsers = users.map(function(value){
    return {...value, "guanzu": "+ 关注"};
  })
  newUsers.forEach(function(ob){
    html += '<div class="anthor"><div class="img"><img src='+ '\"' + ob.avatar_source + '\"' + '>' + '</div><div class="info"><div class="info_1"><div id="name">' + ob.nickname + '</div><div class="focus">' + ob.guanzu + '</div></div><div class="context">' + '写了' + Math.round(numFormat(ob.total_wordage) * 10) / 10 + 'k字 · ' + Math.round(numFormat(ob.total_likes_count) * 10) / 10 + 'k喜欢' + '</div></div></div></div>'
  })
  // for (index in users) {
  //   var ob = users[index]
  //   html += '<div class="anthor"><div class="img"><img src='+ '\"' + ob.avatar_source + '\"' + '>' + '</div><div class="info"><div class="info_1"><div id="name">' + ob.nickname + '</div><div class="focus">' + ob.guanzu + '</div></div><div class="context">' + '写了' + Math.round(numFormat(ob.total_wordage) * 10) / 10 + 'k字 · ' + Math.round(numFormat(ob.total_likes_count) * 10) / 10 + 'k喜欢' + '</div></div></div></div>'
  // }
  // for(var i = 0; i < users.length; i++){
  //   var ob = users[i];
  //   html += '<div class="anthor"><div class="img"><img src='+ '\"' + ob.avatar_source + '\"' + '>' + '</div><div class="info"><div class="info_1"><div id="name">' + ob.nickname + '</div><div class="focus">' + ob.guanzu + '</div></div><div class="context">' + '写了' + Math.round(numFormat(ob.total_wordage) * 10) / 10 + 'k字 · ' + Math.round(numFormat(ob.total_likes_count) * 10) / 10 + 'k喜欢' + '</div></div></div></div>'
  // }
  return html
}

//写出一个函数
$(document).ready(function () {
  $('.flex-contain').html(parseHtml(data.users));
});
// function(){};

//用data里面的数据，data里面的数据是数组 data.users[{},{},{},{},{}]
// function pingString(data){
  //1.一共拼接五组数据，把每组数据放到一个数组里？
  //avatar_source
  // var avatar_source = [data[0].avatar_source,data[1].avatar_source,data[2].avatar_source,data[3].avatar_source];
  // var avatar_source = [];
  // for (var i = 0; i < data.length; i++){
  //   avatar_source.push(data[i].avatar_source);
  // }
  // console.log(avatar_source);


  // //data.users[1].nickname
  // var nickname = [data[0].nickname,data[1].nickname,data[2].nickname,data[3].nickname];
  // //data.users[1].guanzu
  // var guanzu = [data[0].guanzu,data[1].guanzu,data[2].guanzu,data[3].guanzu];
  // //Math.round(numFormat(data.users[3].total_wordage) * 10) / 10
  // var total_wordage = [Math.round(numFormat(data.users[0].total_wordage) * 10) / 10,Math.round(numFormat(data.users[1].total_wordage) * 10) / 10,Math.round(numFormat(data.users[2].total_wordage) * 10) / 10,Math.round(numFormat(data.users[3].total_wordage) * 10) / 10];
  // //Math.round(numFormat(data.users[0].total_likes_count) * 10) / 10
  // var total_likes_count = [Math.round(numFormat(data.users[0].total_likes_count) * 10) / 10,Math.round(numFormat(data.users[1].total_likes_count) * 10) / 10,Math.round(numFormat(data.users[2].total_likes_count) * 10) / 10,Math.round(numFormat(data.users[3].total_likes_count) * 10) / 10];
  
  // //找出 flex-contain
  // var div = $(".flex-contain");
  // for(var i = 0; i < data.length; i++){
  //   div.html('<div class="anthor"><div class="img"><img src='+ '\"' + avatar_source[i] + '\"' + '>' + '</div><div class="info"><div class="info_1"><div id="name">' + nickname[i] + '</div><div class="focus">' + guanzu[i] + '</div></div><div class="context">' + '写了' + total_wordage[i] + 'k字 · ' + total_likes_count[i] + 'k喜欢' + '</div></div></div></div>'
  //   );
  // }

// }


// //写出一个函数
// $(document).ready(function () {
//   // var div =  $('.flex-contain');
//   pingString(data.users);
//   // console.log(avatar_source);

// });
// // function(){};



// function numFormat(num) {
//   num = num.toString().split(".");
//   var arr = num[0].split("").reverse();

//   var res = [];
//   for (var i = 0, len = arr.length; i < len; i++) {
//       if (i % 3 === 0 && i !== 0 && i !== 6) {
//           res.push('.');
//       }
//       res.push(arr[i]);
//   }
//   res.reverse();
//   if (num[1]) {
//       res = res.join("").concat("." + num[1]);
//   } else {
//       res = res.join("");
//   }
//   return res;
// }
// numFormat(data.users[3].total_wordage);



//js 相关练习 2021.11.14
//数组
//拼接两个及两个以上的数组concat()
var myCars1=["Saab","Volvo","BMW",'1'];
var myCars2=["Saab","Volvo","BMW",'2'];
var myCars3=["Saab","Volvo","BMW",'3'];
var num = [1,2,3,34,5];
var k = [];
// var myCar = myCars1.concat(myCars2,myCars3);
// console.log(myCar);   var myCar =
// var myCar = num.join();
// var myCar = num.pop();
// var myCar = myCars3.push('1','2');
// var myCar = myCars3.reverse();
// var myCar = myCars3.shift();
// var myCar = k.shift();
var myCar = myCars3.slice();


// document.write(myCars3);




document.write(myCar);
// document.write(myCars3);
// document.write(k);

